{% extends "app/base_site.html" %}

{% block title %} 工作台 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
{% endblock stylesheets %}

{% block content %}
  <div class="right_col" role="main">
    <!-- top tiles -->
    <div class="row tile_count">
      <div class="col-md-4 col-sm-4 col-xs-6 tile_stats_count">
        <span class="count_top"><i class="fa fa-user"></i> 昨日</span>
        <div class="count">2500</div>
        <span class="count_bottom"><i class="green">4% </i> From last Week</span>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-6 tile_stats_count">
        <span class="count_top"><i class="fa fa-clock-o"></i> 本月</span>
        <div class="count">123.50</div>
        <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-6 tile_stats_count">
        <span class="count_top"><i class="fa fa-user"></i> 全部</span>
        <div class="count green">2,500</div>
        <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
      </div>
{#      <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">#}
{#        <span class="count_top"><i class="fa fa-user"></i> Total Females</span>#}
{#        <div class="count">4,567</div>#}
{#        <span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>#}
{#      </div>#}
{#      <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">#}
{#        <span class="count_top"><i class="fa fa-user"></i> Total Collections</span>#}
{#        <div class="count">2,315</div>#}
{#        <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>#}
{#      </div>#}
{#      <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">#}
{#        <span class="count_top"><i class="fa fa-user"></i> Total Connections</span>#}
{#        <div class="count">7,325</div>#}
{#        <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>#}
{#      </div>#}
    </div>
    <!-- /top tiles -->

    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="dashboard_graph">

          <div class="row x_title">
            <div class="col-md-6">
              <h3>最近一周 <small></small></h3>
            </div>
            <div class="col-md-6">
              <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                <span>December 30, 2014 - January 28, 2015</span> <b class="caret"></b>
              </div>
            </div>
          </div>

          <div class="col-md-12 col-sm-9 col-xs-12">
            <div id="chart_plot_01" data-stuff='["a","b","c"]' class="demo-placeholder"></div>
          </div>

{#          <div class="col-md-3 col-sm-3 col-xs-12 bg-white">#}
{#            <div class="x_title">#}
{#              <h2>Top Campaign Performance</h2>#}
{#              <div class="clearfix"></div>#}
{#            </div>#}
{##}
{#            <div class="col-md-12 col-sm-12 col-xs-6">#}
{#              <div>#}
{#                <p>Facebook Campaign</p>#}
{#                <div class="">#}
{#                  <div class="progress progress_sm" style="width: 76%;">#}
{#                    <div class="progress-bar bg-green" role="progressbar" data-transitiongoal="99"></div>#}
{#                  </div>#}
{#                </div>#}
{#              </div>#}
{#              <div>#}
{#                <p>Twitter Campaign</p>#}
{#                <div class="">#}
{#                  <div class="progress progress_sm" style="width: 76%;">#}
{#                    <div class="progress-bar bg-green" role="progressbar" data-transitiongoal="60"></div>#}
{#                  </div>#}
{#                </div>#}
{#              </div>#}
{#            </div>#}
{#            <div class="col-md-12 col-sm-12 col-xs-6">#}
{#              <div>#}
{#                <p>Conventional Media</p>#}
{#                <div class="">#}
{#                  <div class="progress progress_sm" style="width: 76%;">#}
{#                    <div class="progress-bar bg-green" role="progressbar" data-transitiongoal="40"></div>#}
{#                  </div>#}
{#                </div>#}
{#              </div>#}
{#              <div>#}
{#                <p>Bill boards</p>#}
{#                <div class="">#}
{#                  <div class="progress progress_sm" style="width: 76%;">#}
{#                    <div class="progress-bar bg-green" role="progressbar" data-transitiongoal="50"></div>#}
{#                  </div>#}
{#                </div>#}
{#              </div>#}
{#            </div>#}
{##}
{#          </div>#}

          <div class="clearfix"></div>
        </div>
      </div>
    </div>

    <br />

    <div class="row">
       <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>概览数据</h2>
{#              <ul class="nav navbar-right panel_toolbox">#}
{#                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>#}
{#                </li>#}
{#                <li class="dropdown">#}
{#                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>#}
{#                  <ul class="dropdown-menu" role="menu">#}
{#                    <li><a href="#">Settings 1</a>#}
{#                    </li>#}
{#                    <li><a href="#">Settings 2</a>#}
{#                    </li>#}
{#                  </ul>#}
{#                </li>#}
{#                <li><a class="close-link"><i class="fa fa-close"></i></a>#}
{#                </li>#}
{#              </ul>#}
              <div class="clearfix"></div>
            </div>

            <div class="x_content">
              <div class="table-responsive">
                <table class="table table-striped jambo_table bulk_action">
                  <thead>
                    <tr class="headings">
                      <th>
                        <input type="checkbox" id="check-all" class="flat">
                      </th>
                      <th class="column-title">日期 </th>
                      <th class="column-title">广告展示 </th>
                      <th class="column-title">广告点击</th>
                      <th class="column-title">点击率 </th>
                      <th class="column-title">eCPM(元)</th>
                      <th class="column-title">总收入(元) </th>
                      </th>
                      <th class="bulk-actions" colspan="7">
                        <a class="antoo" style="color:#fff; font-weight:500;">Bulk Actions ( <span class="action-cnt"> </span> ) <i class="fa fa-chevron-down"></i></a>
                      </th>
                    </tr>
                  </thead>

                  <tbody>
                    <tr class="even pointer">
                      <td class="a-center ">
                        <input type="checkbox" class="flat" name="table_records">
                      </td>
                      <td class=" ">121000040</td>
                      <td class=" ">May 23, 2014 11:47:56 PM </td>
                      <td class=" ">121000210 <i class="success fa fa-long-arrow-up"></i></td>
                      <td class=" ">John Blank L</td>
                      <td class=" ">Paid</td>
                      <td class="a-right a-right ">$7.45</td>
                      </td>
                    </tr>
                    <tr class="odd pointer">
                      <td class="a-center ">
                        <input type="checkbox" class="flat" name="table_records">
                      </td>
                      <td class=" ">121000039</td>
                      <td class=" ">May 23, 2014 11:30:12 PM</td>
                      <td class=" ">121000208 <i class="success fa fa-long-arrow-up"></i>
                      </td>
                      <td class=" ">John Blank L</td>
                      <td class=" ">Paid</td>
                      <td class="a-right a-right ">$741.20</td>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

    </div>


    </div>
  </div>
{% endblock content %}

{% block javascripts %}
  {{ block.super}}
  <!-- Chart.js -->
  <script src="/static/vendors/Chart.js/dist/Chart.min.js"></script>
  <!-- gauge.js -->
  <script src="/static/vendors/gauge.js/dist/gauge.min.js"></script>
  <!-- Skycons -->
  <script src="/static/vendors/skycons/skycons.js"></script>
  <!-- Flot -->
  <script src="/static/vendors/Flot/jquery.flot.js"></script>
  <script src="/static/vendors/Flot/jquery.flot.pie.js"></script>
  <script src="/static/vendors/Flot/jquery.flot.time.js"></script>
  <script src="/static/vendors/Flot/jquery.flot.stack.js"></script>
  <script src="/static/vendors/Flot/jquery.flot.resize.js"></script>
  <!-- Flot plugins -->
  <script src="/static/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
  <script src="/static/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
  <script src="/static/vendors/flot.curvedlines/curvedLines.js"></script>
  <!-- DateJS -->
  <script src="/static/vendors/DateJS/build/date.js"></script>
  <!-- JQVMap -->
  <script src="/static/vendors/jqvmap/dist/jquery.vmap.js"></script>
  <script src="/static/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
  <script src="/static/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
{% endblock javascripts %}
